<template>
  <a-modal
    title="添加主体"
    v-model="visible"
    @ok="onSubmit"
    @cancel="onCancel"
  >
    <a-spin :spinning="loading">
      <a-form-model
        ref="subjectForm"
        layout="vertical"
        :rules="subjectForm.type == 20 ? subjectRules2 : subjectRules1"
        :model="subjectForm"
      >
        <a-form-model-item label="主体类型" prop="type">
          <a-select v-model="subjectForm.type" placeholder="请选择类型">
            <a-select-option v-for="(item,index) in typeOpts" :key="index" :value="index">{{item}}</a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item v-if="subjectForm.type == 10" label="身份证正面" prop="id_card_front">
          <a-upload-dragger
            name="file"
            accept=".jpg,.png"
            :action="uploadUrl"
            :headers="headers"
            @change="onChangeUpload1"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              拖拽文件至此区域
            </p>
            <!--            <img v-if="subjectForm.id_card_front" :src="subjectForm.id_card_front" style="width: 100px" />-->
            <!--            <div v-else>-->
            <!--              <a-icon :type="uploadLoading1 ? 'loading' : 'plus'" />-->
            <!--              <div class="ant-upload-text">-->
            <!--                上传身份证正面照片-->
            <!--              </div>-->
            <!--            </div>-->
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item v-if="subjectForm.type == 10" label="身份证反面" prop="id_card_reverse">
          <a-upload-dragger
            name="file"
            accept=".jpg,.png,.jpeg"
            :action="uploadUrl"
            :headers="headers"
            @change="onChangeUpload2"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              拖拽文件至此区域
            </p>
            <!--            <img v-if="subjectForm.id_card_reverse" :src="subjectForm.id_card_reverse" style="width: 100px" />-->
            <!--            <div v-else>-->
            <!--              <a-icon :type="uploadLoading2 ? 'loading' : 'plus'" />-->
            <!--              <div class="ant-upload-text">-->
            <!--                上传身份证反面照片-->
            <!--              </div>-->
            <!--            </div>-->
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item v-if="subjectForm.type == 10" label="个体资质">
          <a-upload-dragger
            name="file"
            accept=".jpg,.png,.jpeg"
            :action="uploadUrl"
            :headers="headers"
            @change="onChangeUpload"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              拖拽文件至此区域
            </p>
            <!--            <img v-if="subjectForm.license_file" :src="subjectForm.license_file" style="width: 100px" alt="avatar" />-->
            <!--            <div v-else>-->
            <!--              <a-icon :type="uploadLoading3 ? 'loading' : 'plus'" />-->
            <!--              <div class="ant-upload-text">-->
            <!--                上传企业营业执照-->
            <!--              </div>-->
            <!--            </div>-->
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item v-if="subjectForm.type == 20" label="资质" prop="license_file">
          <a-upload-dragger
            name="file"
            accept=".jpg,.png,.jpeg"
            :action="uploadUrl"
            :headers="headers"
            @change="onChangeUpload3"
          >
            <p class="ant-upload-drag-icon">
              <a-icon type="inbox" />
            </p>
            <p class="ant-upload-text">
              拖拽文件至此区域
            </p>
            <!--            <img v-if="subjectForm.license_file" :src="subjectForm.license_file" style="width: 100px" alt="avatar" />-->
            <!--            <div v-else>-->
            <!--              <a-icon :type="uploadLoading3 ? 'loading' : 'plus'" />-->
            <!--              <div class="ant-upload-text">-->
            <!--                上传企业营业执照-->
            <!--              </div>-->
            <!--            </div>-->
          </a-upload-dragger>
        </a-form-model-item>
        <a-form-model-item label="名称" prop="subject">
          <a-input type="text" placeholder="请输入名称" v-model="subjectForm.subject" />
        </a-form-model-item>
        <a-form-model-item v-if="subjectForm.type == 10" label="证件号码" prop="id_card">
          <a-input type="text" placeholder="请输入证件号码" v-model="subjectForm.id_card" />
        </a-form-model-item>
        <a-form-model-item v-if="subjectForm.type == 20" label="营业执照编号" prop="license_num">
          <a-input type="text" placeholder="请输入证件号码" v-model="subjectForm.license_num" />
        </a-form-model-item>
        <a-form-model-item label="联系电话">
          <a-input type="text" placeholder="请输入联系电话" v-model="subjectForm.phone" />
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
import storage from 'store'
import { ACCESS_TOKEN } from '@/store/mutation-types'
import apis from '@/api'
import { getAddSubject, postAddSubject, ocrLicense, ocrIdcard } from '@/api/apply'

export default {
  name: 'ApplyModal',
  data () {
    return {
      loading: false,
      visible: true,
      subjectForm: {},
      subjectRules1: {
        type: [{ required: true, message: '必须选择主体类型', trigger: 'blur' }],
        id_card_front: [{ required: true, message: '必须上传身份证正面', trigger: 'change' }],
        id_card_reverse: [{ required: true, message: '必须上传身份证反面', trigger: 'change' }],
        subject: [{ required: true, message: '必须输入名称', trigger: 'blur' }],
        // phone: [{ required: true, message: '必须输入联系电话', trigger: 'blur' }],
        id_card: [{ required: true, message: '必须输入身份证号', trigger: 'blur' }]
      },
      subjectRules2: {
        type: [{ required: true, message: '必须选择主体类型', trigger: 'blur' }],
        license_file: [{ required: true, message: '必须上传资质文件', trigger: 'blur' }],
        subject: [{ required: true, message: '必须输入名称', trigger: 'blur' }],
        // phone: [{ required: true, message: '必须输入联系电话', trigger: 'blur' }],
        license_num: [{ required: true, message: '必须输入营业执照编号', trigger: 'blur' }]
      },
      headers: { 'Access-Token': storage.get(ACCESS_TOKEN) },
      uploadUrl: apis.Upload,
      uploadLoading: false,
      uploadLoading1: false,
      uploadLoading2: false,
      uploadLoading3: false,
      typeOpts: {}
    }
  },
  created () {
    getAddSubject().then(res => {
      if (res.status === 0) {
        this.typeOpts = res.result.typeOpts
      }
    })
  },
  methods: {
    onSubmit () {
      const app = this
      const data = {}
      app.$refs.subjectForm.validate(valid => {
        if (valid) {
          for (const k in app.subjectForm) {
            data['subject[' + k + ']'] = app.subjectForm[k]
          }
          postAddSubject(data).then(res => {
            if (res.status === 0) {
              app.onCancel()
            } else {
              app.$warning({
                title: res.msg
              })
            }
          })
        } else {
          return false
        }
      })
    },
    onCancel () {
      this.visible = false
      this.$emit('cancel', this.visible)
    },
    onChangeUpload1 (info) {
      const app = this
      if (info.file.status === 'uploading') {
        app.uploadLoading1 = true
      }
      if (info.file.status === 'done') {
        app.subjectForm.id_card_front = info.file.response.result.url
        app.uploadLoading1 = false
        app.loading = true
        ocrIdcard(app.subjectForm.id_card_front, 'face').then(res => {
          if (res.status === 0) {
            app.subjectForm.subject = res.result.frontResult.name
            app.subjectForm.id_card = res.result.frontResult.IDNumber
          } else {
            app.$warning({
              title: res.msg
            })
            app.subjectForm = {}
          }
        }).finally(() => {
          app.loading = false
        })
      }
    },
    onChangeUpload2 (info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading2 = true
      }
      if (info.file.status === 'done') {
        this.subjectForm.id_card_reverse = info.file.response.result.url
        this.uploadLoading2 = false
      }
    },
    onChangeUpload3 (info) {
      const app = this
      if (info.file.status === 'uploading') {
        app.uploadLoading3 = true
      }
      if (info.file.status === 'done') {
        app.subjectForm.license_file = info.file.response.result.url
        app.uploadLoading3 = false
        app.loading = true
        ocrLicense(app.subjectForm.license_file).then(res => {
          if (res.status === 0) {
            app.subjectForm.subject = res.result.name
            app.subjectForm.license_num = res.result.registerNumber
          } else {
            app.$warning({
              title: res.msg
            })
            app.subjectForm = {}
          }
        }).finally(() => {
          app.loading = false
        })
      }
    },
    onChangeUpload (info) {
      if (info.file.status === 'uploading') {
        this.uploadLoading = true
      }
      if (info.file.status === 'done') {
        this.subjectForm.personal_license_file = info.file.response.result.url
        this.uploadLoading = false
      }
    }
  }
}
</script>

<style scoped>

</style>
